page {
  position: relative;

  display: grid;
  grid-template:
    'nav-bar nav-bar' min-content
    '. .' 20px
    'avatar nickname' min-content
    '. .' 32px
    'level-card-list level-card-list' min-content
    '. .' 24px
    'right-panel right-panel' min-content
    '. .' 10px
    'task-panel task-panel' min-content
    '. .' 16px
    'remark remark' min-content
    / 60px 1fr;
  column-gap: 10px;
  place-items: center;
  padding-bottom: 50px;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: -1;
  }

  .nav-bar {
    grid-area: nav-bar;
    width: 100%;
  }

  .avatar {
    grid-area: avatar;
    justify-self: end;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
  }

  .nickname {
    grid-area: nickname;
    justify-self: start;
    font-size: 18px;
  }

  .task-btn,
  .my-reward-btn {
    position: absolute;
    right: 0;
    width: 60px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px 0 0 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    color: #f04465;
    font-size: 10px;
  }

  .task-btn {
    top: 100px;
  }

  .my-reward-btn {
    top: 125px;
  }

  .level-card-list {
    grid-area: level-card-list;
    width: 100vw;
  }

  .right-panel {
    grid-area: right-panel;
    width: calc(100% - 20px);
    box-sizing: content-box;
    background: linear-gradient(180deg, #fdf1fc, #fff7d6 100%);
    border: 1px solid #ffffff;
    border-radius: 8px;

    display: grid;
    grid-template:
      'title title' min-content
      '. .' 20px
      'content content' min-content
      / 1fr 1fr;
    place-items: center;
    padding: 8px 0px 23px 0px;

    .right-panel-title {
      grid-area: title;

      display: flex;
      justify-content: center;
      // align-items: start;
      // 沿文字基线对齐
      align-items: baseline;

      position: relative;

      // 背景椭圆形
      &::after {
        content: '';

        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;

        display: block;
        width: 221px;
        height: 22px;
        background: #fce0f0;
        border-radius: 50%;
      }

      .text {
        z-index: 1;
        font-size: 18px;
        font-weight: bold;

        .count {
          font-size: 36px;
        }
      }
    }

    .right-panel-content {
      grid-area: content;
      width: 100%;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(auto-fill, 21.3333vw);
      row-gap: 15px;
      column-gap: 15px;
      justify-items: center;

      .right-item {
        width: 100px;

        display: grid;
        grid-template:
          'icon' 56px
          '.' 8px
          'text' min-content
          'remark' min-content
          / 1fr;
        place-items: center;

        .icon {
          grid-area: icon;
          width: 100%;
          height: 100%;
        }

        .lock {
          grid-area: icon;
          width: 100%;
          height: 100%;
        }

        .text {
          grid-area: text;
          font-size: 12px;
          color: #333333;
          text-align: center;
        }

        .remark {
          grid-area: remark;
          font-size: 12px;
          color: #8d8d8d;
          text-align: center;
        }
      }
    }
  }

  .task-panel {
    grid-area: task-panel;

    width: calc(100% - 20px);
    background: #ffffff;
    border-radius: 8px;

    display: grid;
    grid-template:
      'title' min-content
      'content' min-content
      'footer' min-content
      / 1fr;
    row-gap: 16px;
    padding: 16px;
    place-items: center;

    .task-panel-title {
      grid-area: title;
      justify-self: start;

      font-size: 18px;
      color: #333333;
      font-weight: bold;

      .task-panel-title-remark {
        font-size: 14px;
        font-weight: normal;
        color: #8d8d8d;
      }
    }

    .task-panel-content {
      grid-area: content;

      width: 100%;

      display: grid;
      grid-template-rows: repeat(auto-fill, min-content);
      grid-template-columns: 1fr;
      row-gap: 8px;

      .task-item {
        width: 100%;

        display: grid;
        grid-template:
          'icon text btn' 1fr
          / 48px 1fr 71px;
        column-gap: 8px;
        align-items: center;

        &.with-progress {
          grid-template:
            'icon text btn' 1fr
            'icon progress btn' 1fr
            / 48px 1fr 71px;
        }

        &.with-remark {
          grid-template:
            'icon text btn' 1fr
            'icon remark btn' 1fr
            / 48px 1fr 71px;
        }

        .icon {
          grid-area: icon;
          width: 48px;
          height: 48px;
        }

        .text {
          grid-area: text;
          font-size: 16px;
          color: #333333;
          font-weight: bold;
        }

        .progress {
          grid-area: progress;
          font-size: 14px;
          color: #8d8d8d;

          .current-progress {
            color: #f04465;
          }
        }

        .remark {
          grid-area: remark;
          font-size: 12px;
          color: #8d8d8d;

          .remark-highlight {
            color: #f04465;
          }
        }

        .btn {
          grid-area: btn;

          width: 71px;
          height: 28px;
          background: rgba(240, 68, 101, 0.1);
          border: 1px solid #f04465;
          border-radius: 24px;

          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 14px;
          color: #f04465;

          &.completed {
            background: #f5f9fc;
            border: 1px solid #e7e9eb;

            color: #9d9fa0;
          }
        }
      }
    }

    .task-panel-footer {
      grid-area: footer;

      font-size: 12px;
      color: #f04465;
    }
  }

  .page-remark {
    grid-area: remark;

    width: 253px;
    height: 34px;
    font-size: 12px;
    text-align: CENTER;
    color: #8d8d8d;
  }
}
